<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            width:100px;
            height:100px;
            background:red;
            border:1px solid #ccc;
            color:white;
            text-align:center;
            line-height:100px;
            position:absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<div id="box">盒子</div>

</body>
</html>
<script>
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    var start = null;
    var d = document.getElementById('box');
    function step(timestamp) {
        if (start === null) start = timestamp;
        var progress = timestamp - start;
        d.style.left = Math.min(progress/10, 200) + "px";
        if (progress < 5000) {
            requestAnimationFrame(step);
        }
    }
    requestAnimationFrame(step);

</script>